<script setup>
import {computed, ref} from "vue";

const props = defineProps({
  start: {
    type: String,
  },
  end: {
    type: String
  },
  option: {
    type: String,
  },
  list: {
    type: Object,
  }
})
const headerData = [
  {
    label: '周日',
  },
  {
    label: '周一',
  },
  {
    label: '周二',
  },
  {
    label: '周三',
  },
  {
    label: '周四',
  },
  {
    label: '周五',
  },
  {
    label: '周六',
  }
]

function calcProdMap(data) {
  const colorEnum = ['', 'success', 'info', 'warning', 'danger']
  const styleMap = {}
  let itemHeight = 30;
  if (data.length > maxNum.value) maxNum.value = data.length
  const v = data.map((item, index) => {
    item.index = index
    item.color = colorEnum[index % colorEnum.length]
    styleMap[index] = (index * itemHeight) + (index * 5)
    return item
  })
  return {v, styleMap}
}

const maxNum = ref(0)

const baseList = computed(() => {
  const {list, option: optString} = props
  const option = JSON.parse(optString)
  return option.map(item => {
    item.task = []
    const {timestamp} = item
    let {list: dayList} = list
    if (!dayList || !dayList.length) {
      item.task = []
      return item
    }
    const {v, styleMap} = calcProdMap(dayList)
    dayList = v
    item.styleMap = styleMap
    for (let i = 0; i < dayList.length; i++) {
      const target = dayList[i]
      // console.log(target, 'target')
      const {title, day_list, index, color} = target
      if (!day_list || !day_list.length) continue;
      day_list.forEach(taskItem => {
        const {start, end} = taskItem
        const startTime = new Date(start).getTime()
        const endTime = new Date(end).getTime()
        if (timestamp >= startTime && timestamp <= endTime) {
          item.task.push({title, time: `${start}-${end}`, color, index, top: (index * 24) + 10})
        }
      })
    }
    return item
  })
})

</script>

<template>
  <div class="calendar-item-wrap">
    <div class="project-name">
      <span>{{ list.xiangmu_name }}</span>
    </div>
    <div class="calendar-item-header">
      <div class="header-item"
           v-for="(item,index) in headerData"
           :key="index"
      >
        <span>{{ item.label }}</span>
      </div>
    </div>
    <div class="calendar-item-box-wrap">
      <div class="calendar-item-box-item"
           v-for="(item,index) in baseList"
           :key="index"
           :class="{next:item.isNext}"
           :style="{'--item':maxNum}"
      >
        <div class="item-day">
          <span>{{ item.day }}</span>
        </div>
        <div class="w-100 relative task-wrap">
          <div class="task-item absolute" v-for="(task,taskIndex) in item.task"
               :key="taskIndex"
               :style="{top:item.styleMap[task.index]+'px'}"
          >
            <el-tag :type="task.color">{{ task.title }}</el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.calendar-item-wrap {
  //width: 600px;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);
  padding: 16px;
  border-radius: 4px;
  --item-height: 90px;
  --item-padding: 6px;
  --border-color: #ebeef5;
  --text-color: #606266;

  .project-name {
    font-weight: bold;
    font-size: 20px;
    color: var(--text-color);
    margin-bottom: 16px;
  }

  .calendar-item-box-wrap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-right: 0;


    .calendar-item-box-item {
      min-height: var(--item-height);
      height: calc(40px * var(--item) + 12px);
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
      padding: var(--item-padding);
      box-sizing: border-box;

      .task-wrap {
        margin-top: 8px;
      }

      .task-item {
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .item-day {
        text-align: center;
      }

      &.next {
        //color: #ff8400;
      }
    }
  }

  .calendar-item-header {
    display: flex;
    flex-flow: row nowrap;

    .header-item {
      height: 38px;
      flex: 1;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-color);
    }
  }
}
</style>
